<template>
  <div class="construction-progress">
    <img src="../../../assets/chart-data-bg.png" />
    <div class="title">
      <div class="title-left">
        <span>施工进度</span>
        <img src="../../../assets/show-title-bg.png" />
      </div>
    </div>
    <div class="construction-progress-data">
      <div class="construction-progress-data-view">
        <div v-for="item in dataList" :key="item.name" class="construction-progress-data-item">
          <div class="status-icon" :style="getStyle(item)"></div>
          <span>{{ item.name }}</span>
          <div class="progress">
            <div class="progress-wrap">
              <div
                :style="{ width: item.index + '%', backgroundColor: item.color }"
                class="progress-child"
              ></div>
            </div>
            <span>{{ item.index }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../../api";
export default {
  name: "",
  components: {},
  data() {
    return {
      // 施工进度
      progress: {
        progress: 0.0,
        erprogress: 0.0,
        exprogress: 0.0,
      },
      dataList: [
        { name: "初支进度", index: 68, color: "#ef6d57" },
        { name: "二衬进度", index: 22, color: "#f18e31" },
        { name: "超前地质预报进度", index: 70, color: "#e3c552" },
        { name: "初支质量检测进度", index: 15, color: "#68e194" },
        { name: "二衬质量检测进度", index: 90, color: "#59c9e5" },
      ],
    };
  },
  mounted() {
    this.$bus.$on("early-warning", (row) => {
      api
        .bigdataprogress({ tid: row })
        .then((res) => {
          if (res.data.code == 2001) {
            this.dataList[0].index = res.data.data.progress
            this.dataList[1].index = res.data.data.exprogress

            this.dataList[2].index = res.data.data.projectTunnelVO.predictioninfo
            this.dataList[3].index = res.data.data.projectTunnelVO.chu
            this.dataList[4].index = res.data.data.projectTunnelVO.er

          }
        })
        .catch((err) => {
          console.log(err);
        });
    });
  },
  methods: {
    getStyle(item) {
      return {
        "background-color": item.color,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.construction-progress {
  width: 100%;
  height: 28%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  > img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  > .title {
    width: 100%;
    height: 43px;
    padding-right: 30px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    > span {
      color: #cecece;
      font-size: 16px;
    }

    > .title-left {
      width: 218px;
      height: 43px;
      display: flex;
      align-items: center;
      padding-left: 60px;
      position: relative;
      > img {
        width: 100%;
        height: 43px;
        position: absolute;
        left: 0;
        top: 0;
      }

      > span {
        position: relative;
        color: #fff;
        font-size: 18px;
      }
    }
  }

  > .construction-progress-data {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;

    .construction-progress-data-view {
      width: 100%;
      height: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      z-index: 99;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      > .construction-progress-data-item {
        width: 100%;
        height: 20%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        .status-icon {
          width: 10px;
          height: 10px;
          margin-top: -19px;
          background-color: #f18e31;
        }

        > span {
          color: #fff;
          margin-left: 10px;
          font-size: 18px;
          margin-top: -21px;
        }

        .progress {
          width: 50%;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          flex-direction: column;

          > .progress-wrap {
            width: 100%;
            height: 30%;
            background-color: #091735;
            border-radius: 5px;
            overflow: hidden;

            > .progress-child {
              width: 50%;
              height: 100%;
              border-radius: 5px;
              background-color: #e3c552;
            }
          }

          > span {
            width: 29px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            // font-weight: 700;
            color: #fff;
            text-shadow: 0px 0px 2px #f5f5f5;
            // -webkit-text-stroke: 1px #001067;
            // text-stroke: 1px #001067;
          }
        }
      }
    }

    > img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>
